<ion-view view-title="DashinGo">
  <ion-nav-buttons side="right">
    <button ng-show="check_state(2)" ng-click="endTravel()" class="button button-clear">结束</button>
  </ion-nav-buttons>
  <ion-content scroll="false" padding="false">
    <baidu-map options="mapOptions" class="baidumap" style="width: 100%; height: 100%;display: block;"></baidu-map>
    <div id="console-bar"
      style="background: rgba(16,16,26,0.85); text-align: center;
      position: absolute; top: 0; overflow: hidden; padding: 10px 30px;
      width: 100%; color: #ddd;" ng-class="{'hidden': hideFlag, 'show': !hideFlag}">
      <p style="color: #FF9C26; font-size: 39px; margin: 20px 0;">00:08:33</p>
      <p>时长</p>
      <div class="row" style="border-top: 1px solid #666; margin-top: 10px;">
        <div class="col">
          <span style="color: #FF9C26; font-size: 25px;">0.0</span><br>
          <span style="font-size: 13px;">速度<br>（km/h）</span>
        </div>
        <div class="col" style="border-left: 1px solid #666; border-right: 1px solid #666; ">
          <span style="color: #FF9C26; font-size: 25px;">0.0</span><br>
          <span style="font-size: 13px;">距离<br>（km）</span>
        </div>
        <div class="col">
          <span style="color: #FF9C26; font-size: 25px;">0.0</span><br>
          <span style="font-size: 13px;">热量<br>（kcall）</span>
        </div>
      </div>
    </div>
    <img src="img/load_path.png" ui-sref="app.tab.load_path"
         style="position: absolute; left: 15px; bottom: 70px; width: 40px;">
    <img src="img/locate.png" style="position: absolute; left: 15px; bottom: 20px; width: 40px;">
    <div id="toggle-detail-btn" ng-class="{'hidden': hideFlag, 'show': !hideFlag}" ng-click="toggleDetail()"
         style="height: 20px; text-align: center; background-color: #888; position: absolute;
          width: 100%; color: #eee; font-size: 20px; line-height: 20px;">
      <i id="toggle-detail-btn-icon" ng-class="{'hidden': hideFlag, 'show': !hideFlag}" class="ion-chevron-down"></i>
    </div>
    <style>
      #console-bar.show {
        height: 180px;
        transform: translate3d(0,0,0);
        transition: height 0.5s;
        -webkit-backface-visibility: hidden;
        -webkit-transform-style: preserve-3d;
      }
      #console-bar.hidden {
        height: 90px;
        transform: translate3d(0,0,180px);
        transition: height 0.5s;
        -webkit-backface-visibility: hidden;
        -webkit-transform-style: preserve-3d;
      }
      #toggle-detail-btn.show {
        top: 0;
        transform: translate3d(0, 180px, 0);
        transition: transform 0.5s;
        -webkit-backface-visibility: hidden;
        -webkit-transform-style: preserve-3d;
      }
      #toggle-detail-btn.hidden {
        top: 0;
        transform: translate3d(0, 90px, 0);
        transition: transform 0.5s;
        -webkit-transform-style: preserve-3d;
      }
      #toggle-detail-btn-icon.show {
        transform: rotate(180deg);
        transition: transform 0.5s;
        -webkit-backface-visibility: hidden;
        -webkit-transform-style: preserve-3d;
      }
      #toggle-detail-btn-icon.hidden {
        transform: rotate(0deg);
        transition: transform 0.5s;
        -webkit-backface-visibility: hidden;
        -webkit-transform-style: preserve-3d;
      }
    </style>
  </ion-content>
</ion-view>
